<script setup lang="ts">
import { useData } from 'vitepress';
import { inject, Ref } from 'vue';
import { useSidebar } from '../composables/sidebar.js';

const props = withDefaults(
    defineProps<{
        // 是否强制显示
        mustShow?: boolean;
    }>(),
    { mustShow: false }
);

const { theme } = useData();
const { hasSidebar } = useSidebar();
const curTheme = inject('current-theme') as Ref<string>;
</script>

<template>
    <footer v-if="theme.footer" class="VPFooter" :class="{ 'has-sidebar': hasSidebar&&!mustShow }">
        <div class="farris-docs-features-after--bottom-bg">
            <img src="/assets/bg-footer.png" class="img-block" v-if="curTheme != 'dark'" />
            <img src="/assets/bg-footer-dark.png" class="img-block" v-if="curTheme == 'dark'" />
        </div>
        <div class="farris-docs-footer">
            <div class="farris-docs-footer--content">
                <div class="content-intro">
                    <div class="content-block">
                        <h6>生态产品</h6>
                        <span>Farris Design Mobile</span>
                        <span>Farris Design DashBoard</span>
                        <span>Farris Design V</span>
                        <span>Farris Design Portal</span>
                        <span>Farris Design Pix</span>
                    </div>
                    <div class="content-block">
                        <h6>设计原则</h6>
                        <span>高效</span>
                        <span>清晰</span>
                        <span>一致</span>
                        <span>美观</span>
                    </div>
                </div>
                <div class="content-gz">
                    <div class="content-block">
                        <p><img src="/assets/wx-ubml.jpg" title="关注UBML公众号" /></p>
                        <h6>关注UBML公众号</h6>
                    </div>
                    <div class="content-block">
                        <p><img src="/assets/wx-developer.jpg" title="加入开发者群" /></p>
                        <h6>加入开发者群</h6>
                    </div>
                </div>
            </div>
            <!-- <div class="farris-docs-footer--bottom">
                <p class="copyright"><span v-html="theme.footer.copyright"></span><span v-html="theme.footer.address"></span></p>
            </div> -->
        </div>
    </footer>
</template>

<style scoped>
.VPFooter {
    position: relative;
    z-index: var(--vp-z-index-footer);
    padding: 0 !important;
    position: relative;
}
.farris-docs-footer {
    padding-top: 80px;
    padding-bottom:40px;
    color: rgba(255, 255, 255, var(--footer-content-text-opacity));
    background-color: var(--footer-bg);
}
.farris-docs-footer h6 {
    font-size: 16px;
    line-height: 24px;
    font-family: var(--vp-font-family-title);
    color: rgba(255, 255, 255, var(--footer-title-text-opacity));
}
.farris-docs-footer--bottom,
.farris-docs-footer--content {
    margin: 0 auto;
    max-width: var(--vp-layout-max-width);
}
.farris-docs-footer--content {
    display: flex;
}

/**链接 */
.content-intro {
    display: flex;
    flex-direction: row;
    column-gap: var(--footer-gap);
}
.content-intro h6 {
    margin: 0 0 20px;
}
.content-intro a,
.content-intro span {
    display: block;
    line-height: 28px;
}
/** 关注 */
.content-gz {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    column-gap: calc(var(--footer-gap) * 0.5);
    text-align: center;
}
.content-gz .content-block p {
    display: inline-block;
    border-radius: 12px;
    padding: 4px;
    margin: 0 0 20px 0;
    background: var(--footer-gz-bg);
}
.content-gz .content-block img {
    display: block;
    width: 118px;
    height: 118px;
    margin: 0;
}

/**底部 */
.farris-docs-footer--bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    line-height: 28px;
    padding: 25px 0;
    text-align: center;
    color: rgba(255, 255, 255, var(--footer-title-text-opacity));
}
.farris-docs-footer--bottom span + span {
    margin-left: 36px;
}
.VPFooter.has-sidebar {
    display: none;
}

@media (min-width: 768px) {
    .VPFooter {
        padding: 16px;
    }
}
</style>
